import React, { useState } from 'react'
import Header from '../layout/Header'
import Search from '../layout/Search'
import Main from '../layout/Main'
import { Button } from 'antd'
export default function PurchasOrder() {
  const [status, SetStatus] = useState(1)
  const [searchHeight, SetsearchHeight] = useState('150px')
  const [columns, SetColumns] = useState([
    {
      title: '单据编号',
      dataIndex: 'documentnumber',
      key: 'documentnumber',
    },
    {
      title: '供应商名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '采购金额',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '仓库',
      dataIndex: 'warehouse',
      key: 'warehouse',
    },
    {
      title: '制单人',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '采购单状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '制单时间',
      dataIndex: 'createtime',
      key: 'createtime',
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render: (text: any, record: any) => {
        const { status } = record;
        return <div>
          {
            status === '待审核' && <div>
              <Button >审核</Button>
              <Button>修改</Button>
              <Button>详情</Button>
              <Button>关闭</Button>
            </div>
          }
          {
            status === '编辑中' && <div>
              <Button>修改</Button>
              <Button>详情</Button>
              <Button>关闭</Button>
            </div>
          }
          {
            status === '已完成' && <div>
              <Button>复制</Button>
              <Button>详情</Button>
              <Button>删除</Button>
            </div>
          }
          {
            status === '已关闭' && <div>
              <Button>复制</Button>
              <Button>详情</Button>
              <Button>删除</Button>
            </div>
          }
          {
            status === '审核驳回' && <div>
              <Button>复制</Button>
              <Button>修改</Button>
              <Button>详情</Button>
              <Button>关闭</Button>
            </div>
          }
          {
            status === '待入库' && <div>
              <Button>复制</Button>
              <Button>详情</Button>
              <Button>关闭</Button>
            </div>
          }
          {
            status === '部分入库' && <div>
              <Button>复制</Button>
              <Button>详情</Button>
              <Button>关闭</Button>
            </div>
          }
        </div>
      }
    },
  ])
  const [list, SetList] = useState([
    {
      id: 1,
      documentnumber: "CG203506092356",
      name: "聚沙商贸",
      price: 99000.00,
      warehouse: "华北2仓",
      creator: "周杰伦",
      status: 0,
      createtime: "2035-09-19 9:39:39",
      operate: 1
    }, {
      id: 2,
      documentnumber: "CG203506092356",
      name: "聚沙商贸",
      price: 99000.00,
      warehouse: "华北2仓",
      creator: "周杰伦",
      status: 1,
      createtime: "2035-09-19 9:39:39",
      operate: 1
    }, {
      id: 3,
      documentnumber: "CG203506092356",
      name: "聚沙商贸",
      price: 99000.00,
      warehouse: "华北2仓",
      creator: "周杰伦",
      status: 2,
      createtime: "2035-09-19 9:39:39",
      operate: 1
    }, {
      id: 4,
      documentnumber: "CG203506092356",
      name: "聚沙商贸",
      price: 99000.00,
      warehouse: "华北2仓",
      creator: "周杰伦",
      status: 3,
      createtime: "2035-09-19 9:39:39",
      operate: 1
    }, {
      id: 5,
      documentnumber: "CG203506092356",
      name: "聚沙商贸",
      price: 99000.00,
      warehouse: "华北2仓",
      creator: "周杰伦",
      status: 4,
      createtime: "2035-09-19 9:39:39",
      operate: 1
    }, {
      id: 6,
      documentnumber: "CG203506092356",
      name: "聚沙商贸",
      price: 99000.00,
      warehouse: "华北2仓",
      creator: "周杰伦",
      status: 5,
      createtime: "2035-09-19 9:39:39",
      operate: 1
    }, {
      id: 7,
      documentnumber: "CG203506092356",
      name: "聚沙商贸",
      price: 99000.00,
      warehouse: "华北2仓",
      creator: "周杰伦",
      status: 6,
      createtime: "2035-09-19 9:39:39",
      operate: 1
    }
  ])
  const [pageSize, SetPageSize] = useState(2)
  const [page, SetPage] = useState(1)
  const paginationConfing = {
    page: page,
    total: list.length,
    pageSize: pageSize,
    showSizeChanger: true,
    pageSizeOptions: ['2', '3', '4', '5'],
    onchange: (page:number) => {
      SetPage(page)
    },
    onShowSizeChange: (current:number, size:number) => {
      SetPageSize(size)
      SetPage(current)
    }
  }
  return (
    <div>
      <Header status={status} />
      <Search status={status} searchHeight={searchHeight} />
      <Main status={status} columns={columns} list={list} paginationConfing={paginationConfing} />
    </div>
  )
}
